<template>
  <div>
    <zeda-dialog
      v-model="visible"
      width="1200px"
      title="查看详情"
      :before-close="handleClose"
    >
      <Title name="基本信息" :line="false" slot="green">
        <desc-base-info
          :data="info"
          :colnum-info="baseInfo"
          align="right"
          :no-line-height="true"
          label-width="120px"
          class="base-info"
        >
          <template slot="type">
            <dict-tag
              :options="dict.type.energy_consumption_device_type"
              :value="info.type"
            />
          </template>
          <template slot="assignedType">
            <div v-if="pictureList.length > 0" class="img">
              <el-image
                v-for="(item, index) in pictureList"
                :key="index"
                :src="baseUrl + item"
                fit="cover"
              ></el-image>
            </div>
          </template>
        </desc-base-info>
      </Title>
      <form-button
        slot="footer"
        cancel-text="关闭"
        :show-submit-button="false"
        @cancel="handleClose"
      ></form-button>
    </zeda-dialog>
  </div>
</template>
  <script>
import { detail } from "@/api/energyDevice/index";
import FormButton from "@/components/FormButton";
export default {
  dicts: ["energy_consumption_device_type"],
  components: {
    FormButton,
  },
  props: {
    visible: { type: Boolean, default: false },
    id: { type: [String, Number], default: "" },
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      pictureList: [],
      info: {},
      show: false,
    };
  },
  computed: {
    baseInfo({ info }) {
      let arr = [];
      arr = [
        { label: "设备类型", prop: "type", colNum: 3 },
        { label: "设备名称", prop: "name", colNum: 3 },
        { label: "设备品牌", prop: "brand", colNum: 3 },
        { label: "总额定功率", prop: "power", colNum: 3, unit: "KW" },
        { label: "安装时间", prop: "installTime", colNum: 3 },
        { label: "安装位置描述", prop: "installPosition", colNum: 3 },
        { label: "备注", prop: "remarks", colNum: 2 },
        {
          label: "安装现场图片",
          prop: "assignedType",
          colNum: 2,
          class: "flex-start",
        },
      ];

      return arr;
    },
  },
  watch: {
    visible(value) {
      if (value && String(this.id).length > 0) {
        this.getInfo();
      }
    },
  },
  methods: {
    getInfo() {
      const that = this;
      detail(that.id)
        .then((res) => {
          if (res.code === 700) {
            that.$message.warning(res.msg);
            return false;
          }
          that.info = res.data;
          that.pictureList = that.info.picturesPath
            ? that.info.picturesPath.split(",")
            : [];
        })
        .catch((err) => {
          that.info = {};
          // this.$message.error("系统错误,请联系管理员!300022");
        });
    },
    handleClose(status) {
      this.$emit("close", typeof status === "boolean" ? status : false);
    },
  },
};
</script>

  <style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";

::v-deep .el-dialog__body {
  @include scrollBar2;

  .title-container {
    padding: 20px 0;
  }
}

.img {
  .el-image {
    width: 100px;
    height: 100px;
    margin: 0 10px;
  }
}
</style>
